<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="areaDialogFormRef" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="上级地点" prop="parentId">
							<el-cascader
								:options="state.allArea"
								:props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false }"
								placeholder="请选择上级区域"
								clearable
								class="w100"
								v-model="state.ruleForm.parentId"
							>
								<template #default="{ node, data }">
									<span>{{ data.name }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>

							<!-- <el-input v-model="state.ruleForm.name" placeholder="请选择上级" clearable></el-input> -->
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="名称" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入地点名称" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="sort">
							<el-input-number v-model="state.ruleForm.sort" :min="1" :max="100" controls-position="right" />
							<!-- <el-input v-model="state.ruleForm.sort" placeholder="请输入排序" clearable></el-input> -->
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(areaDialogFormRef)" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import msg from '/@/utils/messageUtils';
import type { FormInstance, FormRules } from 'element-plus';

import { DataAreaApi } from '/@/api/shop/data/area/index';
const areaDialogFormRef = ref();
const state = reactive({
	ruleForm: {
		id: '',
		parentId: '',
		name: '',
		sort: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	allArea: [],
});

const rules = reactive<FormRules>({
	parentId: [{ required: true, message: '请上传选择上级区域', trigger: 'blur' }],
	name: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
	sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
});

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
const emit = defineEmits(['refresh']);

const loadAllArea = async () => {
	let { data } = await DataAreaApi().choiceParent();
	console.log('data: ', data);
	state.allArea = data;
};

const loadView = async (id: string) => {
	let { data } = await DataAreaApi().view(id);
	state.ruleForm.id = data.id;
	state.ruleForm.name = data.name;
	state.ruleForm.parentId = data.parentId;
	state.ruleForm.sort = data.sort;
};

const openDialog = (type: string, id: string) => {
	loadAllArea();
	if (type === 'edit') {
		state.dialog.title = '修改app信息';
		state.dialog.submitTxt = '修 改';
		state.dialog.type = 'edit';
		state.ruleForm.id = id;
		console.log('id: ', id);
		loadView(id);
	} else {
		state.dialog.title = '新增app应用';
		state.dialog.submitTxt = '新 增';
		nextTick(() => {
			areaDialogFormRef.value.resetFields();
			areaDialogFormRef.value.clearValidate();
			if (id) {
				state.ruleForm.parentId = id;
			}
		});

		state.dialog.type = 'add';
	}
	state.dialog.isShowDialog = true;
};

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			try {
				if (state.dialog.type === 'add') {
					await DataAreaApi().create(state.ruleForm);
				} else {
					await DataAreaApi().update(state.ruleForm);
				}
				msg().success('操作成功');
				closeDialog();
				emit('refresh');
			} catch (e) {
				msg().error('新增失败');
			}
		}
	});
};

defineExpose({ openDialog });
</script>

<style lang="scss" scoped></style>
